<template>
  <el-dialog
    v-model="dialogStore.dialogs.clientHub.visible"
    title="客户详情"
    width="60%"
    :close-on-click-modal="false"
    @close="dialogStore.closeDialog('clientHub')"
  >
    <div class="client-detail" v-if="client">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="客户名称">{{ client.name }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ client.contact }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ client.phone }}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{ client.company }}</el-descriptions-item>
        <el-descriptions-item label="客户地址" :span="2">{{ client.address || '暂无地址' }}</el-descriptions-item>
        <el-descriptions-item label="合计欠款">
          <el-tag :type="client.totalAmount === '0.00' ? 'success' : 'warning'">
            ￥{{ client.totalAmount }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="客户状态">
          <el-tag type="success">正常</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ client.registerTime || '2024-01-01' }}</el-descriptions-item>
        <el-descriptions-item label="备注信息" :span="2">{{ client.remarks || '优质客户，合作愉快' }}</el-descriptions-item>
      </el-descriptions>

      <div class="rental-history" style="margin-top: 20px;">
        <h3>租赁历史</h3>
        <el-table :data="rentalHistory" style="width: 100%; margin-top: 10px;">
          <el-table-column prop="equipmentName" label="设备名称" />
          <el-table-column prop="startDate" label="租赁开始" />
          <el-table-column prop="endDate" label="租赁结束" />
          <el-table-column prop="amount" label="租金金额" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogStore.closeDialog('clientHub')">关闭</el-button>
        <el-button type="primary" @click="editClient">编辑客户</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { computed } from 'vue'
import { usePageDialogStore } from '@/store/pageDialogs'

export default {
  name: 'ClientDetailDialog',
  setup() {
    const dialogStore = usePageDialogStore()
    
    const client = computed(() => dialogStore.dialogs.clientHub.data)
    
    const rentalHistory = [
      {
        equipmentName: '剪叉式升降机001',
        startDate: '2024-06-01',
        endDate: '2024-06-15',
        amount: '3000.00',
        status: '已完成'
      },
      {
        equipmentName: '直臂式升降机002',
        startDate: '2024-07-01',
        endDate: '2024-07-20',
        amount: '7000.00',
        status: '进行中'
      }
    ]
    
    const editClient = () => {
      console.log('编辑客户:', client.value)
      // 这里可以跳转到编辑页面或打开编辑弹窗
    }
    
    return {
      dialogStore,
      client,
      rentalHistory,
      editClient
    }
  }
}
</script>

<style scoped>
.client-detail {
  padding: 10px 0;
}

.rental-history h3 {
  color: #333;
  font-size: 16px;
  margin-bottom: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
